<template>
  <a-modal
    :title="title"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    
    <a-form-model ref="form" :model="model">
      <a-form-model-item label="服务周期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryName">
        <a-checkbox-group
          v-model="model.serviceMonth"
          name="checkboxgroup"
          :options="periodList"
          @change="onChange"
        />
      </a-form-model-item>
    </a-form-model>
    
  </a-modal>
</template>

<script>

  export default {
    name: 'ServiceMonthModal',
    data() {
      return {
        periodList: [],
        weekList: [
          {
            value: '0',
            label: '加入当天'
          },
          {
            value: '1',
            label: '第一周'
          },
          {
            value: '2',
            label: '第二周'
          },
          {
            value: '3',
            label: '第三周'
          },
          {
            value: '4',
            label: '第四周'
          },
        ],
        monthList: [
          {
            value: '0',
            label: '加入当天'
          },
          {
            value: '1',
            label: '第一个月'
          },
          {
            value: '2',
            label: '第二个月'
          },
          {
            value: '3',
            label: '第三个月'
          },
          {
            value: '4',
            label: '第四个月'
          },
          {
            value: '5',
            label: '第五个月'
          },
          {
            value: '6',
            label: '第六个月'
          },
          {
            value: '7',
            label: '第七个月'
          },
          {
            value: '8',
            label: '第八个月'
          },
          {
            value: '9',
            label: '第九个月'
          },
          {
            value: '10',
            label: '第十个月'
          },
          {
            value: '11',
            label: '第十一个月'
          },
          {
            value: '12',
            label: '第十二个月'
          }
        ],
        title: '操作',
        visible: false,
        confirmLoading: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        }
      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        this.visible = true
        this.model = Object.assign({}, record)
        this.periodList = record.packageType == 1 ? this.monthList : this.weekList
        this.periodList = this.periodList.slice(0, record.packagePeriod + 1)
        console.log(this.periodList)
      },
      onChange(value) {
        console.log(value);
      },
      handleSubmit() {
        this.$emit('ok', this.model)
        this.close()
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.visible = false
        this.$refs.form.resetFields();
      }
    }
  }
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>